<template>
  <view>
    <uni-card spacing="0px">
      <view class="view_head">
        <image class="image_head" :src="data.avatarUrl" />
        <text class="text_title">{{ titleComputed }}</text>
      </view>
      <view style="margin-top: 25px;">
        <text class="text_message">优质回答获得{{ data.award }}积分</text>
      </view>
      <button
        class="button_answer"
        type="primary"
        size="mini"
        :disabled="data.type === -1"
        @click="click"
      >
        {{ btnTextComputed }}
      </button>
    </uni-card>
  </view> 
</template>

<script>
import { getQuestion } from '@/common/api/question.js'
export default {
  data() {
    return {
      data: {
        title: '暂无提问',
        avatarUrl: '../../../static/index/answerbar/default_head.png',
        type: -1,
        award: 0
      }
    }
  },
  onLoad() {
    getQuestion(-1).then(res => {
      this.data = res
    })
  },
  computed: {
    titleComputed: function() {
      return this.data.title.length > 8 ? this.data.title.substring(0, 8) + '...' : this.data.title
    },
    btnTextComputed: function() {
      if (this.data.type === 0) {
        return '立即回答'
      }
      return '立即回答'
    }
  },
  methods: {
    click() {
      uni.navigateTo({
        url: '/pages/questions/questionDetail/index?qid=' + this.data.qid
      })
    },
    // 重新获取问题
    reload() {
      if (!this.reloading) {
        this.reloading = true
        getQuestion(-1).then(res => {
          if (this.data.qid === res.qid) {
            uni.showToast({
              title: '暂时没有更多了..',
              icon: 'none'
            })
          }
          this.data = res
          this.reloading = false
        }).catch(err => {
          this.reloading = false
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
	.view_head{
		margin-bottom: 15px;
		display: flex;
		.image_head{
			width: 40px;
			height: 40px;
			border-radius: 40px;
		}
		.text_title{
			color: black;
			font-weight: bold;
			margin-left: 10px;
			font-size: 15px;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space:nowrap;
		}
	}
	.text_message{
		float: left;
		color: gray;
		font-size: 10px;
		letter-spacing: 1px;
	}
	.button_answer{
		font-size: 14px;
		width: auto;
		float: right;
		bottom: 15px;
	}
</style>
